import {messages, queryCurrencyPrecision} from "share/common";
import React from 'react'
import { Tooltip } from 'antd'
import invoiceBagApproveService from 'containers/financial-management/invoice-bag-approve/invoice-bag-approve.service'
import moment from 'moment'
import menuRoute from "routes/menuRoute";
import { dealListTag } from 'share/common'
import ResizeTable from 'components/resize-table'

class ReportList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        deleted: 0,
        withoutPermissions: 0,
        auditExpenseReportDTOs: [],
        passExpenseReportDTOs: [],
        processingExpenseReportDTOs: []
      },
      columns: [{
        dataIndex: 'index', title: messages('financial-management.key403')/*序号*/,
        render: (text, record, index) => index + 1, width: '10%'
      }, {
        dataIndex: 'applicantName', title: messages('financial-management.key131')/*申请人*/,
        render: text => <Tooltip title={text} placement='topLeft'>{text}</Tooltip>
      }, {
        dataIndex: 'employeeID', title: messages('financial-management.key130')/*工号*/,
        render: text => <Tooltip title={text} placement='topLeft'>{text}</Tooltip>
      }, {
        dataIndex: 'submittedDate', title: messages('financial-management.key479')/*提交日期*/,
        render: date => moment(date).local().format('YYYY-MM-DD')
      }, {
        dataIndex: 'formName', title: messages('financial-management.key133')/*单据类型*/,
        render: text => <Tooltip title={text} placement='topLeft'>{text}</Tooltip>
      }, {
        dataIndex: 'childBusinessCode', title: messages('financial-management.key449')/*报销单号*/,
        render: text => <Tooltip title={text} placement='topLeft'>{text}</Tooltip>
      }, {
        dataIndex: 'currencyCode', title: messages('financial-management.key405')/*币种*/
      }, {
        dataIndex: 'totalAmount', title: messages('financial-management.key279')/*总金额*/,
        render:  (totalAmount, record) => this.filterMoney(totalAmount, queryCurrencyPrecision(record.currencyCode))
      }, {
        dataIndex: 'payCurrencyCode', title: messages('financial-management.key168')/*支付币种*/,
        render: (t, record) => record.currencyCode
      }, {
        dataIndex: 'realPaymentAmount', title: messages('financial-management.key169')/*待支付金额*/,
        render: this.filterMoney
      }],
      loading: false
    };
    this.expenseDetail = menuRoute.getRouteItem('expense-report-detail-view');
    this.expenseAudit = menuRoute.getRouteItem('expense-report-detail-audit');
  }

  componentDidMount() {
    const { invoiceBagId } = this.props;
    this.setState({ loading: true });
    invoiceBagApproveService.getReportListByBagId(invoiceBagId).then(res => {
      this.setState({ data: res.data, loading: false })
    })
  }

  handleClickRow = (record, needAudit) => {
    if(needAudit)
      window.open(
        this.expenseAudit.url
          .replace(':expenseReportOID', record.expenseReportOID)
          .replace(':tab', 'prending_audit')
      );
    else
      window.open(this.expenseDetail.url.replace(':expenseReportOID', record.expenseReportOID));
  };

  renderClass = record => dealListTag(record) ? '' : 'row-expand-display-none';

  render() {
    const { loading, columns, data } = this.state;
    const {
      processingExpenseReportDTOs, passExpenseReportDTOs, auditExpenseReportDTOs, deleted, withoutPermissions
    } = data;
    return (
      <div>
        <b> {messages('financial-management.key757',{
          arg1: deleted + withoutPermissions,
          arg2: withoutPermissions,
          arg3: deleted
        })/*未显示报销单，共{arg1}张：{arg2}张报销单无处理权限；{arg3}张报销单员工已删除*/}
        </b>
        <div className="table-count" style={{ marginTop: 20 }}>
          {messages('financial-management.key758',{
            arg1: auditExpenseReportDTOs.length
          })/*待审核报销单，共{arg1}张*/}
        </div>
        <ResizeTable
          columns={columns}
          bordered
          loading={loading}
          pagination={false}
          rowClassName={this.renderClass}
          expandedRowRender={dealListTag}
          dataSource={auditExpenseReportDTOs}
          onRow={record => ({
            onClick: () => this.handleClickRow(record, true)
          })}
          size="middle"/>
        <div className="table-count" style={{ marginTop: 20 }}>
          {messages('financial-management.key759',{
            arg1: passExpenseReportDTOs.length
          })/*已审核报销单，共{arg1}张*/}
        </div>
        <ResizeTable
          columns={columns}
          bordered
          loading={loading}
          pagination={false}
          rowClassName={this.renderClass}
          expandedRowRender={dealListTag}
          dataSource={passExpenseReportDTOs}
          onRow={record => ({
            onClick: () => this.handleClickRow(record)
          })}
          size="middle"
        />
        <div className="table-count" style={{ marginTop: 20 }}>
          {messages('financial-management.key760', {
            arg1: processingExpenseReportDTOs.length
          })/*员工处理中报销单，共{arg1}张*/}
        </div>
        <ResizeTable
          columns={columns}
          bordered
          rowKey="expenseReportOID"
          loading={loading}
          pagination={false}
          rowClassName={this.renderClass}
          expandedRowRender={dealListTag}
          dataSource={processingExpenseReportDTOs}
          onRow={record => ({
            onClick: () => this.handleClickRow(record)
          })}
          size="middle"
        />
      </div>
    )
  }
}

export default ReportList
